<template>
  <div class="app-container">
    <!-- <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="公告标题" prop="noticeTitle">
        <el-input
          v-model="queryParams.noticeTitle"
          placeholder="请输入公告标题"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作人员" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入操作人员"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="noticeType">
        <el-select
          v-model="queryParams.noticeType"
          placeholder="公告类型"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in sys_notice_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col> -->
    <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:notice:edit']"
          >修改</el-button
        >
      </el-col> -->
    <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->

    <!-- <el-table
      v-loading="loading"
      :data="noticeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="noticeId" width="100">
        <template #default="scope">
          <span>{{
            scope.$index +
            1 +
            (queryParams.pageDomain.pageNum - 1) *
              queryParams.pageDomain.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="通知标题"
        align="center"
        prop="title"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建者"
        align="center"
        prop="userName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="200"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleTop(scope.row)">{{
            scope.row.isTop == "1" ? "取消置顶" : "置顶"
          }}</el-button>
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    /> -->
    <el-row style="margin-bottom:30px">
      <el-col :span="24"
        ><div class="task-form-title">可见范围:{{ rangeName }}</div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-radio-group v-model="reviewStatus">
          <el-radio value="1">通过</el-radio>
          <el-radio value="2">驳回</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <editor v-model="richText" :min-height="192" />
        <!-- <editor
              class="WangEditor"
              @select="getRich"
              ref="childrenRef"
              :editValue="richText"
            /> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="submit">确定</el-button>
      </el-col>
    </el-row>

    <NoticeDialog
      v-model="dialogVisible"
      @confirm="submit"
      :currentNoticeId="currentNoticeId"
      :projectId="props.projectId"
    ></NoticeDialog>
  </div>
</template>

<script setup name="Project">
import { listNotice, getNotice, updateNotice } from "@/api/system/notice";
import {
  getNoticeList,
  addNotice,
  delNotice,
  editForTop,
  addProblems,
  getProblems,
  handleAudit,
  getAuditInfo,
} from "@/api/pms/project";
import { addBanner } from "@/api/system/banner";
import NoticeDialog from "./components/noticeDialog.vue";
const props = defineProps({
  projectId: {
    type: String,
  },
  auditId: {
    type: String,
  },
});
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict(
  "sys_notice_status",
  "sys_notice_type"
);

const noticeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dialogVisible = ref(false);
const currentNoticeId = ref("");
const richText = ref("");
const reviewStatus = ref("");
const rangeName = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageDomain: {
      isAsc: "true",
      orderByColumn: "",
      pageNum: 1,
      pageSize: 10,
      reasonable: true,
    },
    proId: "",
    title: "",
  },
  rules: {
    noticeTitle: [
      { required: true, message: "公告标题不能为空", trigger: "blur" },
    ],
    noticeType: [
      { required: true, message: "公告类型不能为空", trigger: "change" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  let params = {
    id: props.auditId,
  };
  getAuditInfo(params).then((response) => {
    richText.value = response.data.opinion;
    reviewStatus.value = response.data.reviewStatus;
    rangeName.value = response.data.rangeName;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    noticeId: undefined,
    noticeTitle: undefined,
    noticeType: undefined,
    noticeContent: undefined,
    status: "0",
  };
  proxy.resetForm("noticeRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["noticeRef"].validate((valid) => {
    if (valid) {
      if (form.value.noticeId != undefined) {
        updateNotice(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addNotice(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

function submit(formData) {
  let params = {
    proId: props.projectId,
    opinion: richText.value,
    reviewStatus: reviewStatus.value,
    id: props.auditId,
  };
  handleAudit(params).then((response) => {
    proxy.$modal.msgSuccess("审核成功");
    // getList();
    router.push({ path: `/pms/audit/list` });
  });
}
onMounted(() => {
  queryParams.value.proId = props.projectId;
  getList();
});

// watch(
//   () => props.projectId,
//   (newId, oldId) => {
//     if (newId) {
//       debugger
//       queryParams.value.id = props.projectId;
//       getList();
//     }
//   },
//   { deep: true, immediate: true }
// );
</script>
